<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CCRM扫描出库</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
        }
        html{
            font-size: 100%;
        }

        .clear {
            clear: both;
        }
        ul {
            margin: 0 auto;
            margin-top: 10%;
            width: 90%;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }

        li {
            list-style: none;
            padding: 0 1rem;
        }

        .kuaidi-number {
            height: 3.6rem;
            line-height: 3.6rem;
            padding-bottom: 0;
            color: #fff;
            background-color: #0089f1;
        }

        .control-man{
            height: 3rem;
            line-height: 3rem;
            padding-top: 0.6rem;
            color: #000;
        }

        .sn {
            color: #000;
            height: 3rem;
            line-height: 3rem;
        }

        label {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding-right: 1rem;
            vertical-align: middle;
        }

        .addsn {
            padding-top: 1rem;
            vertical-align: middle;
        }

        .btn {
            border: none;
            background-color: #0089f1;
            color: #fff;
            width: 21%;
            box-sizing: border-box;
        }

        .btn-add {
            height: 3rem;
            width: 25%;
            float: right;
            border: 0;
            border-radius: 0.2rem;
        }


        .addsn .text-add{
            float: left;
            width: 70%;
            height: 3rem;
            box-sizing: border-box;
            padding-left: 0.5rem;
            font-size: 1.2rem;
            border-radius: 3px;
            border: 1px solid #cdcdcd;
        }

        .beizhu {
            width: 95%;
            border-radius: 3px;
            border: 1px solid #cdcdcd;
            padding: 0.5rem;
            font-size: 1.2rem;
        }

        .hook, .hook_on{
            display: inline-block;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            background: url(${gPath}/styles/dingtalk/image/hook.png) no-repeat center center;
            background-size: 20px;
        }

        .hook_on{
            background: url(${gPath}/styles/dingtalk/image/hook_on.png) no-repeat center center;
            background-size: 20px;
        }

        .btns-li{
            padding: 1rem;
        }

        .btn-yellow {
            width: 45%;
            height: 3rem;
            float: left;
            color: #fff;
            background-color: #ff9201;
            border: 0px;
            border-radius: 0.2rem;
        }

        .btns-li .btn-done{
            float: right;
        }
    </style>
    <%@ include file="jsapi-header.jsp"%>
    <script type="text/javascript">
        dd.ready(function() {
//            dd.biz.navigation.setRight({show: false});
        });

        var currSns = [];
        $(function(){
            $("#snUl").find("input[type='checkbox']").each(function(){
                currSns.push(this.value);
            });
        });

        function addSn(){
            var snEle = $("#sn");
            var sn = snEle.val();
            if (currSns.indexOf(sn) != -1){
                dd.device.notification.alert({message: sn +"已存在", buttonName: "确定"});
                return;
            }
            $.getJSON("${gPath}/clmp/productOutput/checkSn", {sn: sn}, function(data){
                if (data.status == 1){
                    $(".bottom-line").before('<li class="sn"><label>SN：'+ sn +'</label><input type="checkbox" checked name="sns" value="'+ sn +'"/></li>');
                    currSns.push(sn);
                } else {
                    dd.device.notification.alert({message: sn + data.msg, buttonName: "确定"});
                }
                snEle.val("");
            });
        }

        function scanSn(){
            dd.biz.util.scan({
                type: "barCode",//type为qrCode或者barCode
                onSuccess: function(data) {
                    var sn = data.text;
                    if (sn.indexOf("SN:") == 0 || sn.indexOf("sn:") == 0)//以SN开头
                        sn = sn.substr(3);
                    if (currSns.indexOf(sn) != -1){
                        dd.device.notification.alert({message: sn +"已存在", buttonName: "确定"});
                        return;
                    }
                    $.getJSON("${gPath}/clmp/productOutput/checkSn", {sn: sn}, function(data){
                        if (data.status == 1){
                            $(".bottom-line").before('<li class="sn"><label>SN：'+ sn +'</label><input type="checkbox" checked name="sns" value="'+ sn +'"/></li>');
                            currSns.push(sn);
                        } else {
                            dd.device.notification.alert({message: sn + data.msg, buttonName: "确定"});
                        }
                    });
                }
            });
        }

        function finish(){
            if ($("input[name='sns']:checked").length == 0){
                dd.device.notification.alert({message: "请添加SN", buttonName: "确定"});
                return;
            }
            $.post("${gPath}/clmp/dingtalk/mobility/productOutput/post_saveOrUpdate", $("#infoForm").serialize(), function(data){
                dd.device.notification.confirm({
                    message: (data.status == 1 ? "操作成功\n" : "操作失败\n") + data.msg,
                    buttonLabels: ['去看看', '继续扫描快递单'],
                    onSuccess : function(result) {
                        switch (result.buttonIndex){
                            case 0:window.location.href = '${gPath}/view/dingtalk/mobility/ProductOutput-list.jsp'; break;
                            case 1:scanExpressNum(); break;
                        }
                    }
                });
            });
        }

        //扫描快递单号
        function scanExpressNum(){
            dd.biz.util.scan({
                type: "barCode",//type为qrCode或者barCode
                onSuccess: function(data) {
                    window.location.href = "${gPath}/clmp/dingtalk/mobility/productOutput/info?express_num="+data.text;
                }
            });
        }
    </script>
</head>
<body>
    <form id="infoForm">
        <input type="hidden" name="productOutput.id" value="${productOutput.id}"/>
        <input type="hidden" name="productOutput.express_num" value="${productOutput.express_num}"/>
        <ul id="snUl">
            <li class="kuaidi-number">快递单号：${productOutput.express_num}</li>
            <li class="sn control-man">操作人员：${productOutput.operator.name}</li>
            <c:if test="${not empty products}">
                <c:forEach items="${products}" var="product">
                    <li class="sn">
                        <label>SN：${product.sn}</label>
                        <input type="checkbox" checked name="sns" value="${product.sn}"/>
                    </li>
                </c:forEach>
            </c:if>
            <li class="addsn bottom-line">
                <input type="text" class="text-add" placeholder="SN :" id="sn"/>
                <input type="button" value="添加" class="btn btn-add" onclick="addSn()"/>
                <div class="clear"></div>
            </li>
            <li class="addsn">
                <textarea class="beizhu" name="productOutput.remark" cols="30" rows="3" placeholder="备注：">${productOutput.remark}</textarea>
            </li>
            <li class="btns-li">
                <input type="button" value="继续扫描" onclick="scanSn()" class="btn-yellow btn-scan" />
                <input type="button" value="完成" onclick="finish()" class="btn-yellow btn-done" />
                <div class="clear"></div>
            </li>
        </ul>
    </form>
</body>
</html>